<script setup>
    import { ref } from 'vue';
    import { RouterLink, RouterView, useRouter } from 'vue-router'
    import { ElNotification,ElMessageBox,ElMessage } from 'element-plus'
     import Cookies from 'js-cookie'
    
    const token = ref("123");
    const router = useRouter();
    
    const exit = ()=>{
        ElMessageBox.confirm(
            '确定退出登录吗？','',
            {
              confirmButtonText: '确认',
              cancelButtonText: '取消',
            }
        ).then(() => {
            Cookies.remove('accessToken');
            let curUrl = encodeURIComponent(location.href);
            location.replace(`/car_wash/admin/login?from_url=${curUrl}`);
        }).catch(()=>{});
        
    }
</script>

<template>
    <div class="box">
        <header id="header">
            品质纯洗操作管理
            <p class="logOut" @click="exit"><el-icon size="18"><Fold /></el-icon>退出登录</p>
        </header>
        <nav>
            <img class="nav_logo" src="../assets/img/order/moren.jpg" alt="" />
            <RouterLink to="/">
                <p class="rou_p"><el-icon size="18"><DocumentCopy /></el-icon>订单管理</p>
            </RouterLink>
            <RouterLink to="/member">
                <p class="rou_p"><el-icon size="18"><TrophyBase /></el-icon>会员管理</p>
            </RouterLink>
        </nav>

        <RouterView />
    </div>
</template>

<style lang="scss">
    /*  公共颜色 */
    $main:#409eff;
    .box{
        width: 100%;height: 100vh;background: #ecf5ff;
        padding: 70px 10px 0px 180px;overflow-y: auto;
        #header{
            position: absolute;left: 0;top: 0;z-index: 10;background-color: #c6e2ff;
            width:100%;height: 60px;line-height: 60px;
            box-shadow: 2px 0px 6px gray;text-align: center;font-weight: bold;
            font-size: 20px;color: $main;padding-left: 180px;
            .logOut{
                position: absolute;right: 25px;top: 10px;font-size: 14px;
                line-height: 40px;color: #000;cursor: pointer;color: #898989;
                &:hover{color: $main;;}
                i{vertical-align: -4px;display: inline-block;margin-right: 5px;}
            }
        }
        nav{
            position: absolute;left: 0;top: 0;z-index:11;
            width: 170px;height: 100%;background-color: #d9ecff;font-size: 15px;color: #FFF;
            text-align: center;padding-top: 70px;box-shadow: 0px 2px 6px gray;
            .nav_logo{
                position: absolute;left: 50%;top: 10px;width: 40px;
                transform: translateX(-50%);-webkit-transform: translateX(-50%);
            }
            a {
                width: 100%;text-align: center;display: inline-block;
                color: #000;line-height: 40px;margin-bottom: 5px;
                &:hover{background-color: $main;color:#FFF;}
                .rou_p{
                    text-align: center;line-height: 40px;
                    i{vertical-align: -3px;display: inline-block;margin-right: 5px;}
                }
            }
            a.router-link-exact-active {
                background-color: $main;color:#FFF;
            }
        }
    }

</style>